<!-- 列表+表单学习 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表+表单学习</title>
</head>
<body>
    <h1>列表+表单学习：</h1>
    <h2>无序列表 ul 嵌套-》li</h2>
    <p>ul 只能放li标签，li 标签可以包含任何内容</p>
    <ul>
        <li><h3>列表条目1</h3></li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>
    <h2>有序列表 ol 嵌套-》li</h2>
    <p>ol 只能放li标签，li 标签可以包含任何内容</p>
    <ol>
        <li><h3>列表条目1</h3></li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ol>
    <h2>定义标签，dl 嵌套 dt 和dd ，dt是定义列表的标题，dd是定义列表的描述、详情</h2>
    <p>dl 只能放 dt、dd标签，dt、dd 标签可以包含任何内容</p>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dt>售后政策</dt>
        <dd>30天无理由</dd>        
    </dl>
    <h2>表格标签 table嵌套tr，tr是行，tr嵌套 td/th，
        是具体每行展示，th是表头 </h2>
        <p> 表格结构标签 thead、tbody、tfoot ,是浏览器</p>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>章三</td>
                <td>100</td>
                <td>98</td>
                <td>97</td>
                <td rowspan="2">100</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>89</td>
                <td>80</td>
                <td>99</td>
                <!-- <td>100</td> -->
            </tr>
            <tr>
                <td>王五</td>
                <td colspan="2">89</td>
                <!-- <td>80</td> -->
                <td>99</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
    <h2>表单学习input标签，type属性值不同</h2>
    <dl>
        <dt>input中type值</dt>
        <dd>text-》文本框，单行文本</dd>
        <dd>password-》密码框</dd>
        <dd>radio-》单选框,name需要相同</dd>
        <dd>checkbox-》多选框</dd>
        <dd>file-》上传文件，multiple 多文件</dd>
    </dl>
    <h3>select下拉框，option，selected</h3>
    <h3>文本域</h3>
    <h3>lable标签，增大点击区域，
        方式1-》lable包裹内容，不包裹表单控件
        lable标签的for属性值，和表单控件的id属性值得相同
        方式2-》lable包裹内容、表单控件，不需要for属性
    </h3>
    <h3>button按钮  type-》submit、reset、button</h3>
    <!-- action 发送请求的url地址 -->
    <form action="">
        文本框：<input type="text" placeholder="请输入用户名">
        <br><br>
        密码框：<input type="password" placeholder="请输入密码">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>
    <br><br>
    单选框：<input type="radio" name="sex" id="man" value="男">
    <label for="man">男</label></input>
    <label><input type="radio" name="sex" id="woman" value="女">女</label>
    <br>
    多选框：<input type="checkbox" name="sex" value="男">男</input>
    <input type="checkbox" name="sex" value="女">女</input>
    <br></br>
    上传文件<input type="file" multiple></input>
    <br>
    <br>
    城市：
    <select name="city" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳" selected>深圳</option>
        <option value="杭州">杭州</option>
    </select>
    <br>
    input文本域：<textarea name="" id="" cols="50" rows="5">输入内容</textarea>
    <br><br>

<hr>
    <dl>
        <dt><h3>无语义的布局标签</h3></dt>
        <dd>div 独占一行</dd>
        <dd>span 不换行</dd>
    </dl>
    <div>div标签，独占一行。大盒子</div>
    <div>div标签，独占一行</div>
    <div>div标签，独占一行</div>
    <span>span 不换行。小盒子</span>
    <span>span 不换行</span>
    <hr>
    <h3>字符实体 &lt; -》小于lt &gt; -》大于gt</h3>
    <div>
        &lt;p&gt;
        &lt;div&gt;
        我中间是空格&nbsp;&nbsp;&nbsp;&nbsp;我中间是空格
    </div>
    
</body>
</html>